<template>
    <view class="main">
        <view class="nav">
            <u-tabs class="tab" :activeStyle="{
                color: '#EA504F',
                fontWeight: 'bold',
            }" :inactiveStyle="{
                color: '#000',
            }" :current="current" :list="list1" @click="click" lineColor="#EA504F"></u-tabs>
        </view>
        <view class="list">
            <view class="item" v-for="(item,index) in list" :key="index">
                <!-- 订单内容 -->
            </view>
        </view>
        <view v-if="list && list.length == 0" class="bottom_msg">
            暂无订单
        </view>
    </view>
</template>

<script>
import { lists } from '@/api/index.js';

export default {
    data() {
        return {
            list1: [
                { name: '全部', id: -1 },
                { name: '待发货', id: 1 },
                { name: '待收货', id: 10 },
                { name: '已完成', id: 20 },
            ],
            list: [], // 初始化为空数组
            current: 0,
            status: -1,
            page: 1,
            last_page: ''
        };
    },
    onLoad() {
        this.getList();
    },
    onReachBottom() {
        if (this.page == this.last_page) {
            uni.showToast({
                title: '已经是最后一页了',
                icon: 'none'
            });
        } else {
            this.page++;
            this.getList();
        }
    },
    methods: {
        async getList() {
            const res = await lists({
                page_size: 15,
                status: this.status,
                page: this.page
            });
            let ndata = res.data.data;
            if (this.page <= 1) {
                this.list = ndata || []; // 确保 list 不为 undefined
            } else {
                this.list = [...this.list, ...ndata];
            }
            this.last_page = res.data.last_page;
        },
        click(e) {
            this.status = e.id;
            this.getList();
        }
    }
};
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		height: fit-content;
		background-color: #f6f6f6;
		
		.nav {
			width: 100%;
			background-color: #fff;
			position: fixed;
			z-index: 10;
		}

		.copy {
			color: #fff;
			font-size: 10px !important;
			border: 1px solid #fff;
			border-radius: 100rpx;
			padding: 5rpx 8rpx;
			margin-left: 10rpx;
		}
		.bottom_msg{
			text-align: center;

		}
		// .tab {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	background-color: #0055ff;
		// }

		.list {
			padding: 126rpx 30rpx 30rpx;

			.item {
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 40rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					text:first-child {
						color: #666;
						font-weight: 600;
						font-size: 26rpx;
					}

					text:last-child {
						font-size: 28rpx;
					}

					.lan {
						color: #1D242C;
					}

					.cheng {
						color: #F68C26;
					}
				}
				
				.cont {
					padding: 24rpx 0;
					border-top: 1rpx solid #ddd;
					box-sizing: border-box;
				}

				.bottom {
					display: flex;
					align-items: center;

					.img {
						width: 170rpx;
						height: 170rpx;
						margin-right: 20rpx;

						image {
							width: 170rpx;
							height: 170rpx;
							border-radius: 20rpx;
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 170rpx;
						flex: 1;

						text:first-child {
							color: #000;
							font-size: 28rpx;
							font-weight: 700;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis; 
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical; 
						}

						.sku {
							display: flex;

							.box {
								font-size: 26rpx;
								color: #fff;
								padding: 6rpx 12rpx;
								background-color: #ea504f;
								border-radius: 10rpx;
							}
						}
					}
					.left{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 170rpx;
						text:first-child{
							color: #000;
							font-size: 28rpx;
						}
						.num{
							display: flex;
							justify-content: flex-end;
							color: #000;
							align-items: center;
						}
					}
				}
			}
		}
	}
	::v-deep .u-tabs__wrapper__nav {
		justify-content: space-around;
		height: 96rpx;
	}
	::v-deep .u-tabs__wrapper__nav__line {
		height: 0rpx !important;
	}
</style>